<template>
    <view class="cinema">
        <view class="cinema-top">
            <u--image showLoading lazyLoad :src="cinemaModel.filmImg" width="143rpx" radius="20rpx" height="200rpx" mode="aspectFill"></u--image>
            <view class="cinema-right">
                <view class="cinema-title">
                    <view class="cinema-name">{{ cinemaModel.fileName }}</view>
                    <view class="cinema-price">
                        <text>共{{ (cinemaModel.seats && cinemaModel.seats.split(',').length) || 0 }}张</text>
                        <!-- <text>￥{{seatsPrice}}</text> -->
                    </view>
                </view>
                <view class="cinema-intro cinema-t">
                    <view>{{ cinemaModel.startTime | date('mm-dd') }}</view>
                    <view class="cinema-time">{{ cinemaModel.startTime | date('hh:MM') }}~{{ cinemaModel.endTime | date('hh:MM') }}</view>
                </view>
                <view class="cinema-intro cinema-t2">
                    <view class="cinema-l">{{ cinemaModel.hallName }}</view>
                    <view class="cinema-l">{{ cinemaModel.seats }}</view>
                </view>
                <view class="cinema-intro cinema-t2">{{ cinemaModel.cinemaName }}</view>
            </view>
        </view>
        <u-line dashed></u-line>
        <view class="cinema-bottom">
            <view class="cinema-cell">
                <image class="cinema-icon" src="/sub_pages/movie/static/image/icon/icon_18.png" mode="scaleToFill" />
                <view class="cinema-txt">不支持退票</view>
            </view>
            <view class="cinema-cell">
                <image class="cinema-icon" src="/sub_pages/movie/static/image/icon/icon_18.png" mode="scaleToFill" />
                <view class="cinema-txt">不支持改签</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        cinemaModel: {
            type: Object,
            default: () => {
                return {};
            },
        },
        seatsList: {
            type: Array,
            default: () => [],
        },
        seatsPrice: {
            type: Number,
            default: 0,
        },
    },

    methods: {
        getInfo(l) {
            if (this.$utils.isCheckEmpty(l && l.orderInfo)) return [];
            return l.orderInfo.sourceData;
        },
    },
};
</script>

<style lang="scss" scoped>
.cinema {
    padding: 30rpx;
    border-radius: 20rpx;
    background-color: #fff;
    &-top {
        display: flex;
        padding-bottom: 30rpx;
    }
    &-right {
        margin-left: 20rpx;
        flex: 1;
    }
    &-title {
        display: flex;
    }
    &-name {
        @include font(30rpx, #333333, bold);
        flex: 1;
        margin-right: 20rpx;
    }
    &-price {
        @include flexCenter;
        @include font(22rpx, #666666);
    }
    &-intro {
        @include flexWrap;
        @include font(24rpx, #666666);
    }
    &-t {
        margin-top: 12rpx;
    }
    &-t2 {
        margin-top: 8rpx;
    }
    &-time {
        margin-left: 20rpx;
    }
    &-l {
        margin-right: 20rpx;
    }
    &-bottom {
        margin-top: 30rpx;
        @include flexCenter;
    }
    &-cell {
        @include flexCenter;
        margin-right: 24rpx;
    }
    &-icon {
        width: 26rpx;
        height: 26rpx;
    }
    &-txt {
        @include font(24rpx, #333);
        margin-left: 8rpx;
    }
}
</style>
